<template>
	<view class="tenant-property" :style="{ background: `linear-gradient(0deg, #635df7 0%, #908cf6 100%) left top/100% calc(${navBarHeight}px + 200rpx) no-repeat rgb(248,248,248)` }">
		<nav-bar title="商户物业" :color="navBarColor" :bg="navBarBg" />
		
		<view class="top">
			<view class="flex-space-between">
				<view class="price">¥250.00</view>
				<van-button round class="btn_1">立即充值</van-button>
			</view>
			
			<view class="flex-space-between" style="margin-top: 20rpx;">
				<view class="flex-align">
					我的账户
					<van-button class="btn_2" round size="mini" color="transparent" text-color="#fff">正常</van-button>
				</view>
				<view>典雅花店</view>
			</view>
		</view>
		
		<view class="title-box flex-align">
			<view class="strong flex-shrink-0">
				<text>通</text>
				<text style="color: rgb(255,182,4);">告</text>
			</view>
			<view class="info ellipsis-1">12号~15号停车场不对外开放,请各位车主注意...</view>
		</view>
		
		<view class="section_2">
			<view class="title">
				<text>历史账单</text>
			</view>
			
			<view class="flex-space-between">
				<view class="tabs flex-align">
					<view v-for="(item, index) in tabs" :key="index" class="tab-item" :class="{ active: index === tabActive }"  @click="tabActive = index">
						{{ item.label }}
					</view>
				</view>
				
				<van-dropdown-menu>
					<van-dropdown-item title="筛选">
						
					</van-dropdown-item>
				</van-dropdown-menu>
			</view>
		</view>
		
		<view class="list">
			<navigator v-for="(item, index) in 2" :key="index" class="item" url="/page_admin/property-catalogue/bill-detail/bill-detail">
				<view class="item_top">
					<view class="flex-space-between">
						<view class="d-flex">
							<view class="round">
								<view class="round_inner"></view>
							</view>
							<view>
								<view class="text_1">物业费</view>
								<view class="text_2">2021/12/31-2022/12/31</view>
							</view>
						</view>
						<price :value="5000" color="rgb(255,65,5)" suffix="/年" />
					</view>
				</view>
				
				<view class="item_bottom flex-space-between">
					<van-tag size="small" round color="rgb(245,74,74)">欠费</van-tag>
					<view class="text_3">请尽快充值账户，缴纳费用</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import navBar from '@/mixins/navbar.js';	
	
export default {
	mixins: [navBar({ navBarColor: '#fff' })],
	data() {
		return {
			navBarHeight: 0,
			tabs: [
				{ label: '年度' },
				{ label: '月度' },
			],
			tabActive: 0,
		}
	},
	created() {
		const { navBarHeight } = getApp().globalData;
		this.navBarHeight = navBarHeight;
	}
}
</script>

<style lang="scss" scoped>
.tenant-property {
	min-height: 100vh;
	
	.top {
		color: #fff;
		font-size: 26rpx;
		line-height: 25rpx;
		padding: 20rpx 30rpx 0;
		height: 200rpx;
		
		.price {
			font-size: 60rpx;
			font-weight: 700;
			line-height: 44rpx;
		}
		
		/deep/.btn_1 .van-button {
			color: rgb(99,93,247);
			font-weight: bold;
			width: 183rpx;
		}
		
		/deep/.btn_2 .van-button {
			border: 1rpx solid #fff !important;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}
	
	.title-box {
		padding: 30rpx;
		font-weight: 700;
		
		.strong {
			font-size: 30rpx;
			line-height: 28rpx;
			margin-right: 10rpx;
		}
		
		.info {
			font-size: 24rpx;
			line-height: 24rpx;
		}
	}
	
	.section_2 {
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 0;
		
		.title text {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 31rpx;
			position: relative;
			z-index: 1;
			
			&::after {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				background-color: rgb(99,93,247);
				border-radius: 4.5rpx;
				width: 62rpx;
				height: 9rpx;
				z-index: -1;
			}
		}
		
		.tabs {
			font-size: 24rpx;
			font-weight: 500;
			column-gap: 26rpx;
			
			.tab-item {
				&.active {
					font-size: 28rpx;
					font-weight: 700;
				}
			}
		}
		
		/deep/.van-dropdown-menu {
			box-shadow: none;
			height: 96rpx;
			
			.van-dropdown-menu__title {
				color: rgb(99,93,247);
			}
		}
	}
	
	.list {
		padding: 30rpx;
		
		.item {
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 13rpx 57rpx rgba(8, 73, 162, 0.11);
			border-radius: 16rpx;
			
			& + .item {
				margin-top: 30rpx;
			}
			
			&_top {
				padding: 30rpx;
				border-bottom: 1rpx solid rgb(239,239,239);
				
				.round {
					margin-top: 4rpx;
					margin-right: 10rpx;
					
					&_inner {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: rgb(121,242,214);
					}
				}
				
				.text_1 {
					font-size: 28rpx;
					font-weight: 700;
					line-height: 27rpx;
				}
				
				.text_2 {
					color: rgb(153,153,153);
					font-size: 24rpx;
					line-height: 23rpx;
					margin-top: 20rpx;
				}
			}
				
			&_bottom {
				padding: 20rpx 30rpx;
				
				.text_3 {
					font-size: 22rpx;
					line-height: 22rpx;
				}
				
				/deep/.van-tag {
					width: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
}
</style>
